<template>
  <div class="page">
    <div class="path"><span class="level-1">商家管理</span>><span class="level-2">商家管理列表</span></div>
    <div class="mods">
      <div class="mod-1">
        <span class="name">商家数量：</span><span class="num">{{count}}</span>
      </div>
      <div class="mod-2">
        <span class="name">商家余额：</span><span class="num">{{storeMoney}}</span>
      </div>
    </div>
    <div class="search">
      <div>
        <span>商家ID：</span>
        <Input v-model="params.bid" placeholder="商家ID"/>
      </div>
      <div>
        <span>用户名：</span>
        <Input v-model="params.username" placeholder="用户名"/>
      </div>
      <div>
        <span>昵称：</span>
        <Input v-model="params.nickname" placeholder="昵称"/>
      </div>
      <div>
        <span>手机号：</span>
        <Input v-model="params.mobile" placeholder="手机号"/>
      </div>
      <div class="btns">
        <Button type="primary" @click="query">查询</Button>
        <Button @click="reset">重置</Button>
      </div>
    </div>
    <DataList class="data-list"
              id="data-list"
              :dataHeight="dataHeight"
              :columns="columns"
              :data="data"
              :total='total'
              :pageSize="pageSize"
              @pageChange="getData"></DataList>
  </div>
</template>
<script>
import DataList from './DataList'
import {listBussiness} from '@/api/api-list'
export default {
  name: 'store',
  data () {
    return {
      columns: [
        {
          title: '商家ID',
          key: 'id',
          width: 100,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '用户名',
          key: 'username',
          width: 160
        },
        {
          title: '昵称',
          key: 'nickname'
        },
        {
          title: '手机号',
          key: 'mobile',
          width: 160
        },
        {
          title: '创建时间',
          key: 'create_time',
          width: 180
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 150,
          render: (h, params) => {
            return h('div', [
              h('span', {
                style: {
                  color: '#2d8cf0',
                  cursor: 'pointer',
                  marginLeft: '15px'
                },
                on: {
                  click: () => {
                    this.viewTask(params.row, params.index)
                  }
                }
              }, '查看任务')
            ])
          }
        }
      ],
      data: [],
      dataHeight: 0,
      params: {
        bid: '', // 商家id
        mobile: '', // 手机号
        username: '', // 用户名
        nickname: ''// 昵称
      },
      count: 0,
      storeMoney: 0,
      total: 0,
      pageSize: 10
    }
  },
  components: {DataList},
  mounted () {
    this.getData(1)
    this.dataHeight = document.getElementById('data-list').clientHeight
  },
  methods: {
    viewTask (row) {
      this.$router.push(`/task/${row.id}`)
      this.$emit('select-menu', 'task', 'task-manager')
    },
    getData (page) {
      listBussiness({...this.params, p: page}).then(({data}) => {
        this.data = data ? data.list : []
        this.total = data.total || 0
        this.pageSize = data.pageSize
        this.storeMoney = data.money || '0.00'
        this.count = data.count || 0
      })
    },
    query () {
      this.getData(1)
    },
    reset () {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.getData(1)
    }
  }
}
</script>
<style scoped lang="less">
  @import "./style/page";
</style>
